<template>
  <div class="eq-right">
    <div class="eq-top-card">
      <div class="eq-top-card-bg">
        <div class="eq-t-c-ctener">
          <span class="eq-t-c-tip">已安全运行</span>
          <div class="eq-t-c-bg">
            <span>{{ days }}</span>
          </div>
          <span class="eq-t-c-tip">天</span>
        </div>
        <div class="eq-top-buttom"> 投运时间 {{ year }}年{{ month }}月{{ day }}日 </div>
      </div>
    </div>
    <div class="eq-right-top">
      <div class="eq-right-top-title">
        <img src="../../../assets/images/home-page/eq-right.png" alt="" />
        负荷统计
      </div>
      <div class="eq-right-top-item">
        <div class="eq-r-t-i-title">
          <span class="eq-dio"></span>
          <span class="eq-d-title">变电站负荷</span>
        </div>
        <div class="eq-r-item-content">
          <div class="eq-r-item-c-i" v-for="(item, index) in listPages" :key="index">
            <div class="eq-r-i-left">
              <div class="eq-r-i-left-bg">
                <img src="../../../assets/images/home-page/xz-01.png" alt="" />
              </div>
              <div class="eq-r-i-left-t">
                <span class="eq-span">{{ item.stationName }}</span>
                <span class="eq-value">{{ item.activePower }} mW</span>
              </div>
            </div>
            <div class="eq-r-i-left-b"> </div>
          </div>
          <!-- <div class="eq-r-item-c-i">
            <div class="eq-r-i-left">
              <div class="eq-r-i-left-bg-t">
                <img src="../../../assets/images/home-page/xz-02.png" alt="" />
              </div>
              <div class="eq-r-i-left-t">
                <span class="eq-span">有功功率</span>
                <span class="eq-value">40.01 mW</span>
              </div>
            </div>
            <div class="eq-r-i-left-b"> </div>
          </div>
          <div class="eq-r-item-c-i">
            <div class="eq-r-i-left">
              <div class="eq-r-i-left-bg">
                <img src="../../../assets/images/home-page/xz-03.png" alt="" />
              </div>
              <div class="eq-r-i-left-t">
                <span class="eq-span">有功功率</span>
                <span class="eq-value">40.01 mW</span>
              </div>
            </div>
            <div class="eq-r-i-left-b"> </div>
          </div> -->
          <!-- <div class="eq-r-item-c-i">
            <div class="eq-r-i-left">
              <div class="eq-r-i-left-bg-t">
                <img src="../../../assets/images/home-page/xz-04.png" alt="" />
              </div>
              <div class="eq-r-i-left-t">
                <span class="eq-span">有功功率</span>
                <span class="eq-value">40.01 mW</span>
              </div>
            </div>
            <div class="eq-r-i-left-b"> </div>
          </div> -->
        </div>
        <div class="eq-r-t-i-title">
          <span class="eq-dio"></span>
          <span class="eq-d-title">今日负荷曲线</span>
        </div>
        <div class="chart-container">
          <canvas width="360" height="180" ref="chartRef"></canvas>
        </div>
      </div>
    </div>
    <div class="eq-right-bottom">
      <div class="eq-right-bottom-title">
        <img src="../../../assets/images/home-page/eq-right.png" alt="" />
        告警统计
      </div>
      <div class="eq-r-buttom">
        <div></div>
        <div class="eq-r-b-top">
          <div class="eq-r-lab-box-left"> </div>
          <div class="eq-r-lab-box">
            <span class="eq-r-lab">告警总数</span>
            <span class="eq-r-value">{{ total }}</span>
          </div>
        </div>
        <div class="eq-r-b-but">
          <NstdBizHrSkillLevelChart />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import * as echarts from 'echarts';
  import { getSafeDay, buslistPage, getDeviceAlarm } from '@/api/auth/ledger.js';
  import NstdBizHrSkillLevelChart from '@/views/home/components/NstdBizHrSkillLevelChart.vue';
  const chartRef = ref(null);
  const myChart = ref(null);
  const total = ref(0);
  const option = ref(null);
  const days = ref(0);
  const year = ref(0);
  const month = ref(0);
  const day = ref(0);
  const listPages = ref([]);
  const params = ref({
    pageNum: 0,
    pageSize: 40
  });
  onMounted(() => {
    getDevices();
    chartDomFun();
    getSafeDays();
    geBuslistPage();
  });
  const getDevices = () => {
    getDeviceAlarm().then((res) => {
      total.value = res.data.total;
    });
  };
  const geBuslistPage = () => {
    buslistPage(params.value).then((res) => {
      listPages.value = res.data.data;
      console.log('res====', res);
    });
  };
  const getSafeDays = () => {
    getSafeDay().then((res) => {
      days.value = res.data.days;
      const dateString = res.data.date;
      const parts = dateString.split('-');
      year.value = parts[0];
      month.value = parts[1];
      day.value = parts[2];
      if (res.data.days < 10) {
        days.value = '0' + '0' + res.data.days;
      } else if (res.data.days < 100) {
        days.value = '0' + res.data.days;
      } else {
        days.value = res.data.days;
      }
      console.log('res', res.data.days);
    });
  };
  const chartDomFun = () => {
    const chartDom = chartRef.value;
    myChart.value = echarts.init(chartDom);
    option.value = {
      width: '305px',
      height: '131px',
      animation: true,
      animationDuration: 2000,
      darkMode: 'auto',
      colorBy: 'series',
      color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
      gradientColor: ['#f6efa6', '#d88273', '#bf444c'],
      aria: {
        decal: {
          decals: [
            {
              color: 'rgba(0, 0, 0, 0.2)',
              dashArrayX: [1, 0],
              dashArrayY: [2, 5],
              symbolSize: 1,
              rotation: 0.5235987755982988
            },
            {
              color: 'rgba(0, 0, 0, 0.2)',
              symbol: 'circle',
              dashArrayX: [
                [8, 8],
                [0, 8, 8, 0]
              ],
              dashArrayY: [6, 0],
              symbolSize: 0.8
            }
          ]
        }
      },
      textStyle: { fontFamily: 'Microsoft YaHei', fontSize: 12, fontStyle: 'normal', fontWeight: 'normal' },
      stateAnimation: { duration: 300, easing: 'cubicOut' },
      animationDurationUpdate: 500,
      animationEasing: 'cubicInOut',
      animationEasingUpdate: 'cubicInOut',
      animationThreshold: 2000,
      progressiveThreshold: 3000,
      progressive: 400,
      hoverLayerThreshold: 3000,
      useUTC: false,
      axisPointer: [
        {
          show: 'auto',
          z: 50,
          type: 'line',
          snap: false,
          triggerTooltip: true,
          triggerEmphasis: true,
          value: null,
          status: null,
          link: [],
          animation: null,
          animationDurationUpdate: 200,
          lineStyle: { color: '#B9BEC9', width: 1, type: 'dashed' },
          shadowStyle: { color: 'rgba(210,219,238,0.2)' },
          label: {
            show: true,
            formatter: null,
            precision: 'auto',
            margin: 3,
            color: '#fff',
            padding: [5, 7, 5, 7],
            backgroundColor: 'auto',
            borderColor: null,
            borderWidth: 0,
            borderRadius: 3
          },
          handle: {
            show: false,
            icon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
            size: 45,
            margin: 50,
            color: '#333',
            shadowBlur: 3,
            shadowColor: '#aaa',
            shadowOffsetX: 0,
            shadowOffsetY: 2,
            throttle: 40
          }
        }
      ],
      tooltip: [
        {
          trigger: 'axis',
          z: 60,
          show: true,
          showContent: true,
          triggerOn: 'mousemove|click',
          alwaysShowContent: false,
          displayMode: 'single',
          renderMode: 'auto',
          confine: null,
          showDelay: 0,
          hideDelay: 100,
          transitionDuration: 0.4,
          enterable: false,
          backgroundColor: '#fff',
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, .2)',
          shadowOffsetX: 1,
          shadowOffsetY: 2,
          borderRadius: 4,
          borderWidth: 1,
          padding: null,
          extraCssText: '',
          axisPointer: {
            type: 'line',
            axis: 'auto',
            animation: 'auto',
            animationDurationUpdate: 200,
            animationEasingUpdate: 'exponentialOut',
            crossStyle: { color: '#999', width: 1, type: 'dashed', textStyle: {} }
          },
          textStyle: { color: '#666', fontSize: 12 }
        }
      ],
      yAxis: [
        {
          name: '单位: %',
          type: 'value',
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee', // 轴线颜色
              width: 2, // 轴线宽度
              opacity: '0.36',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false,
            lineStyle: { type: 'solid', color: '#ffffff', width: 2 },
            onZero: true,
            onZeroAxisIndex: null,
            symbol: ['none', 'none'],
            symbolSize: [10, 15]
          },
          nameTextStyle: { padding: [0, 14, 0, 0], fontSize: 12, color: '#FFF600', fontFamily: 'Microsoft YaHei' },
          axisLabel: {
            color: '#fff',
            fontFamily: 'Dinpro',
            fontSize: 12,
            show: true,
            inside: false,
            rotate: 0,
            showMinLabel: null,
            showMaxLabel: null,
            margin: 8
          },
          boundaryGap: [0, 0],
          axisTick: { show: 'auto', inside: false, length: 5, lineStyle: { width: 1 } },
          splitNumber: 5,
          minorTick: { show: false, splitNumber: 5, length: 3, lineStyle: {} },
          minorSplitLine: { show: false, lineStyle: { color: '#F4F7FD', width: 1 } },
          show: true,
          z: 0,
          inverse: false,
          nameLocation: 'end',
          nameRotate: null,
          nameTruncate: { maxWidth: null, ellipsis: '...', placeholder: '.' },
          nameGap: 15,
          silent: false,
          triggerEvent: false,
          tooltip: { show: false },
          axisPointer: {},
          splitArea: { show: false, areaStyle: { color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'] } },
          offset: 0
        }
      ],
      xAxis: [
        {
          onZero: false,
          type: 'category',
          data: ['1', '3', '5', '7', '9', '11', '13', '15', '17', '19', '21', '23'],
          boundaryGap: false,
          axisTick: {
            show: false,
            alignWithLabel: false,
            interval: 'auto',
            inside: false,
            length: 5,
            lineStyle: { width: 1 }
          },
          axisLine: {
            onZero: false,
            show: true,
            lineStyle: {
              color: '#ccc', // 轴线颜色
              width: 2, // 轴线宽度
              opacity: '0.8',
              type: 'solid' // 设置为虚线
              // 或者使用 'dotted' 来显示点状线
            },
            onZeroAxisIndex: null,
            symbol: ['none', 'none'],
            symbolSize: [10, 15]
          },
          axisLabel: {
            color: '#fff',
            fontFamily: 'Dinpro',
            fontSize: 12,
            interval: 'auto',
            show: true,
            inside: false,
            rotate: 0,
            showMinLabel: null,
            showMaxLabel: null,
            margin: 8
          },
          deduplication: null,
          splitLine: { show: false, lineStyle: { color: ['#E0E6F1'], width: 1, type: 'solid' } },
          show: true,
          z: 0,
          inverse: false,
          name: '',
          nameLocation: 'end',
          nameRotate: null,
          nameTruncate: { maxWidth: null, ellipsis: '...', placeholder: '.' },
          nameTextStyle: {},
          nameGap: 15,
          silent: false,
          triggerEvent: false,
          tooltip: { show: false },
          axisPointer: { status: 'hide', value: 11 },
          splitArea: { show: false, areaStyle: { color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'] } },
          offset: 0
        }
      ],
      grid: [
        {
          left: 40,
          top: 30,
          right: 10,
          bottom: 0,
          show: false,
          z: 0,
          containLabel: false,
          backgroundColor: 'rgba(0,0,0,0)',
          borderWidth: 1,
          borderColor: '#ccc'
        }
      ],
      series: [
        {
          data: [60, 80, 32, 32, 50, 40, 50, 73, 74, 75, 74, 74, 74, 62, 61, 61, 69],
          type: 'line',
          name: '昨日',
          symbol: 'none',
          stackStrategy: 'all',
          smooth: true,
          itemStyle: { color: '#6F85F4' },
          areaStyle: {
            origin: 'auto',
            color: {
              colorStops: [
                { offset: 0, color: 'rgba(111, 133, 244, 1)' },
                { offset: 1, color: 'rgba(111, 133, 244, 0)' }
              ],
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: 'linear',
              global: false
            }
          },
          z: 3,
          coordinateSystem: 'cartesian2d',
          legendHoverLink: true,
          clip: true,
          label: { position: 'top' },
          endLabel: { show: false, valueAnimation: true, distance: 8 },
          lineStyle: { width: 2, type: 'solid' },
          emphasis: { scale: true, label: {} },
          step: false,
          smoothMonotone: null,
          symbolSize: 4,
          symbolRotate: null,
          showSymbol: true,
          showAllSymbol: 'auto',
          connectNulls: false,
          sampling: 'none',
          animationEasing: 'linear',
          progressive: 0,
          hoverLayerThreshold: null,
          universalTransition: { divideShape: 'clone' },
          triggerLineEvent: false
        },
        {
          data: [60, 59, 58, 57, 76, 85, 92, 93, 64, 65, 64, 64, 64, 62, 61, 61, 59],
          type: 'line',
          name: '今日',
          symbol: 'none',
          stackStrategy: 'all',
          smooth: true,
          itemStyle: { color: '#22E1DB' },
          areaStyle: {
            origin: 'auto',
            color: {
              colorStops: [
                { offset: 0, color: 'rgba(34, 225, 219, 1)' },
                { offset: 1, color: 'rgba(34, 225, 219, 0)' }
              ],
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: 'linear',
              global: false
            }
          },
          z: 3,
          coordinateSystem: 'cartesian2d',
          legendHoverLink: true,
          clip: true,
          label: { position: 'top' },
          endLabel: { show: false, valueAnimation: true, distance: 8 },
          lineStyle: { width: 2, type: 'solid' },
          emphasis: { scale: true, label: {} },
          step: false,
          smoothMonotone: null,
          symbolSize: 4,
          symbolRotate: null,
          showSymbol: true,
          showAllSymbol: 'auto',
          connectNulls: false,
          sampling: 'none',
          animationEasing: 'linear',
          progressive: 0,
          hoverLayerThreshold: null,
          universalTransition: { divideShape: 'clone' },
          triggerLineEvent: false
        }
      ],
      visualMap: [],
      legend: [
        {
          right: 15,
          top: 3,
          itemWidth: 10,
          itemHeight: 10,
          data: [
            { name: '昨日', icon: 'circle' },
            { name: '今日', icon: 'circle' }
          ],
          icon: 'circle',
          textStyle: {
            backgroundColor: 'transparent',
            rich: { b: { padding: [0, 0, 0, 0], fontFamily: 'Microsoft YaHei', fontSize: 12 } },
            borderColor: 'transparent',
            color: '#40DDF4'
          },
          z: 4,
          show: true,
          orient: 'horizontal',
          left: null,
          align: 'auto',
          backgroundColor: 'rgba(0,0,0,0)', // 已有的透明背景色
          borderColor: '#000', // 设置为透明
          borderRadius: 0,
          borderWidth: 0, // 设置为0，去掉边框
          padding: 5,
          itemGap: 10,
          symbolRotate: 'inherit',
          symbolKeepAspect: true,
          inactiveColor: '#ccc',
          inactiveBorderColor: '#ccc',
          inactiveBorderWidth: 'auto',
          itemStyle: {
            color: 'inherit',
            opacity: 'inherit',
            borderColor: 'transparent', // 边框颜色设置为透明
            borderWidth: 0
          },
          lineStyle: {
            width: 'auto',
            color: 'inherit',
            inactiveColor: '#000',
            inactiveWidth: 2,
            opacity: 'inherit',
            type: 'inherit',
            cap: 'inherit',
            join: 'inherit',
            dashOffset: 'inherit',
            miterLimit: 'inherit'
          },
          selectedMode: true,
          selector: false,
          selectorLabel: {
            show: true,
            borderRadius: 10,
            padding: [3, 5, 3, 5],
            fontSize: 12,
            fontFamily: 'sans-serif',
            color: '#666',
            borderWidth: 1,
            borderColor: '#666'
          },
          emphasis: { selectorLabel: { show: true, color: '#eee', backgroundColor: '#666' } },
          selectorPosition: 'auto',
          selectorItemGap: 7,
          selectorButtonGap: 10,
          tooltip: { show: false },
          bottom: null,
          selected: {}
        }
      ],
      markArea: [],
      markLine: [],
      markPoint: [],
      brush: [],
      dataZoom: []
    };

    if (myChart.value !== null && option.value) {
      myChart.value.setOption(option.value);
    }
  };
  // 确保在组件卸载时销毁图表实例
  onUnmounted(() => {
    if (myChart.value !== null) {
      myChart.value.dispose();
    }
  });
</script>

<style lang="scss" scoped>
  .eq-right {
    width: 360px;
    position: absolute;
    top: 120px;
    right: 18px;
    z-index: 999;
    .eq-top-card {
      width: 360px;
      background: rgba(5, 30, 67, 0.6);
      padding: 11px 0;
      .eq-top-card-bg {
        width: 300px;
        height: 86px;
        background-image: url('../../../assets/images/home-page/eq_r-bg.png');
        background-size: 100% 100%;
        margin: 0 auto;
        // padding-top: 10px;
        .eq-t-c-ctener {
          display: flex;
          align-items: center;
          justify-content: center;
          .eq-t-c-tip {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
          }
          .eq-t-c-bg {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 88px;
            height: 40px;
            background-image: url('../../../assets/images/home-page/eq_r-it-bg.png');
            background-size: 100% 100%;
            margin: 0 13px;
            line-height: 50px;
            text-align: center;
            span {
              font-family: DIN;
              font-weight: bold;
              font-size: 28px;
              color: #ffffff;
              text-shadow: 0px 0px 3px #00a194;
              letter-spacing: 10px;
              margin-left: 10px;
            }
          }
        }
        .eq-top-buttom {
          width: 100%;
          font-family: PingFangSC;
          font-weight: 400;
          font-size: 14px;
          color: #a7fffb;
          text-align: center;
          margin-top: 11px;
        }
      }
    }
    .eq-right-top {
      width: 100%;
      // margin-top: 15px;
      .eq-right-top-title {
        width: 100%;
        height: 33px;
        background: rgba(10, 39, 82, 1);
        display: flex;
        align-items: center;
        color: #fff;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        margin-top: 8px;
        img {
          width: 20px;
          height: 21px;
          margin: 0 5px 0 10px;
        }
      }
      .eq-right-top-item {
        // height: 504px;
        width: 100%;
        background: rgba(5, 30, 67, 0.6);
        height: 44vh;
        .chart-container {
          width: 100%;
          margin-top: 10px;
        }
        .eq-r-t-i-title {
          display: flex;
          align-items: center;
          padding-top: 6px;
          .eq-dio {
            width: 8px;
            height: 8px;
            background: #19db3c;
            border-radius: 50%;
            margin-left: 20px;
          }
          .eq-d-title {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
            text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
            margin-left: 5px;
          }
        }
        .eq-r-item-content {
          padding: 12px 15px 0 19px;
          height: 17vh;
          display: flex;
          // align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          .eq-r-item-c-i {
            width: 160px;
            .eq-r-i-left {
              width: 160px;
              display: flex;
              align-items: center;
              margin-bottom: -6px;
              .eq-r-i-left-bg {
                width: 52px;
                height: 49px;
                background-image: url('../../../assets/images/home-page/xz-lk.png');
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 5px;
                // margin-bottom: 6px;
                // text-align: center;
                // line-height: 59px;
                img {
                  width: 14px;
                  height: 19px;
                  margin-left: 5px;
                }
              }
              .eq-r-i-left-bg-t {
                width: 52px;
                height: 49px;
                background-image: url('../../../assets/images/home-page/xz-lk.png');
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 5px;
                // text-align: center;
                // line-height: 59px;
                img {
                  width: 21.9px;
                  height: 21.9px;
                }
              }
              .eq-r-i-left-t {
                width: 70%;
                height: 39px;
                background-image: url('../../../assets/images/home-page/xz-bg.png');
                background-size: 100% 100%;
                margin-left: 5px;
                .eq-span {
                  display: inline-block;
                  font-family: PingFang SC;
                  font-weight: bold;
                  font-size: 14px;
                  color: #ffffff;
                }
                .eq-value {
                  display: inline-block;
                  font-family: DIN;
                  font-weight: bold;
                  font-size: 14px;
                  color: #ffffff;
                  margin-top: 5px;
                }
              }
            }
            .eq-r-i-left-b {
              width: 160px;
              height: 26px;
              background-image: url('../../../assets/images/home-page/xz-bt.png');
              background-size: 100% 100%;
              margin-bottom: 6px;
            }
          }
        }
      }
    }
    .eq-right-bottom {
      .eq-right-bottom-title {
        width: 100%;
        height: 33px;
        background: rgba(10, 39, 82, 1);
        display: flex;
        align-items: center;
        color: #fff;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        margin-top: 8px;
        img {
          width: 20px;
          height: 21px;
          margin: 0 5px 0 10px;
        }
      }
      .eq-r-buttom {
        width: 360px;
        background: rgba(5, 30, 67, 0.6);
        height: 18vh;
        .eq-r-b-top {
          width: 190px;
          height: 62px;
          background-image: url('../../../assets/images/home-page/data-mb.png');
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          .eq-r-lab-box-left {
            width: 34%;
          }
          .eq-r-lab-box {
            width: 66%;
            .eq-r-lab {
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 14px;
              color: #ffffff;
            }
            .eq-r-value {
              font-family: DINPro;
              font-weight: bold;
              font-size: 22px;
              color: #c2cdff;
              line-height: 22px;
              text-shadow: 1px 2px 4px rgba(0, 5, 13, 0.5);
              background: linear-gradient(0deg, #fc881c 0%, #f2ae42 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              margin-left: 5px;
            }
          }
        }
        .eq-r-b-but {
          width: 330px;
          height: 200px;
          // height: 500px;
        }
      }
    }
  }
</style>
